<template>

  <a-modal
      :close-on-click-modal="false"
      :open="api.createState.visible"
      :title="api.createState.title"
      destroy-on-close
      ok-text="保存"
      @cancel="api.onCloseCreate()"
      @ok="onSubmit"
  >
    <a-form
        ref="formRef"
        :model="api.createState.form"
        :rules="rules"
        :labelCol="{span: 3}"
    >
      <a-form-item label="名称" name="name">
        <a-input v-model:value="api.createState.form.name" allowClear placeholder="请输入名称"/>
      </a-form-item>

      <a-form-item label="颜色" name="color">
        <color-picker class="color-picker" v-model:rgba="api.createState.form.color" ></color-picker>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {ArticleTypeApi} from "~/api/system/article.api";

interface Props {
  api: ArticleTypeApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive({
  name: [{required: true, message: "请输入名称", trigger: "blur"}],
});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.createState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseCreate();
      }
    });
  }
}

watch(()=>api.createState.visible,value => {
  console.log(value)
  if(value){
    api.createState.form.color = 'rgba(255,30,2,1)'
  }
},{immediate:true})
</script>

<style scoped lang="scss">
.color-picker {
  height: 100%;

  :deep(.zs-color-picker-btn) {
    width: 80px;
    height: 32px;
    border-radius: 6px;
    .zs-color-picker-btn-color {
      border-radius: 6px;
      border: none;
    }
  }
}
</style>
